<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.businessKey"
          size="small"
          clearable
          placeholder="输入申请单号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleSearch"
        />
        <el-input
          v-model="query.taskName"
          size="small"
          clearable
          placeholder="输入任务名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleSearch"
        />
        <el-date-picker
          v-model="timeValue"
          class="filter-item"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-button size="small" type="primary" class="filter-item" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" @click="resetSearch">
          重置
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div slot="header" class="clearfix">
      <span class="role-span">我的审批列表</span>
    </div>
    <el-table highlight-current-row style="width: 100%;margin-top: 10px" :data="approvalList" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="businessKey" label="申请单号" width="280px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击查看编目详情" placement="top">
            <!-- 添加可点击样式 -->
            <span
              style="color: #409EFF; cursor: pointer; text-decoration: underline;"
              @click="handleViewDetails(scope.row)"
            >
              {{ scope.row.businessKey }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称" />
      <el-table-column prop="processName" label="流程名称" />
      <el-table-column prop="starter" label="申请人" />
      <el-table-column prop="createTime" label="申请时间" />
      <el-table-column label="操作" width="130px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-folder-opened" @click="openHandleDialog(scope.row)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <!--      <el-pagination-->
      <!--        background-->
      <!--        layout="prev, pager, next, total"-->
      <!--        :total="totalCount"-->
      <!--        :page-size="10"-->
      <!--        :current-page="currentPage"-->
      <!--        @current-change="changePage"-->
      <!--      />-->
      <Pagination
        :total-num="totalCount"
        :current-page="currentPage"
        @handleCurrentChange="changePage"
        @handlePageSizeChange="handlePageSizeChange"
      />
    </div>

    <!-- 办理弹窗 -->
    <el-dialog
      append-to-body
      :before-close="resetForm"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :title="processName"
      width="1000px"
      class="approval-dialog"
    >
      <div class="block">
        <el-row style="padding: 20px;box-sizing: border-box;">
          <!-- 表单区域 -->

          <!-- 审批历史 -->
          <el-col :span="24" class="history-box">
            <h3>审批历史记录</h3>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                color="#0bbd87"
                size="normal"
                placement="top"
                :timestamp="activity.startTime"
              >

                <el-card v-if="taskName == '车辆配置申请' && index == 1" style="    padding: 10px 15px;">
                  <p>{{ activity.assignee + '--' + activity.taskName }}</p>
                  <p v-if="activity.comment">意见:{{ JSON.parse(activity.comment)?.yijian }}</p>
                  <p v-if="activity.comment">是否调剂：{{ JSON.parse(activity.comment)?.checkYorN }}</p>
                </el-card>
                <el-card v-else style="    padding: 10px 15px;">
                  <p>{{ activity.assignee + '--' + activity.taskName }}</p>
                  <p v-if="activity.comment">审批意见：{{ JSON.parse(activity.comment)?.yijian }}</p>
                  <p v-if="activity.comment">审批结果：{{ JSON.parse(activity.comment)?.checkYorN }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-col>

          <el-col v-if="currentOpenHandleDialog === 1" :span="24" style="max-height: 400px;overflow-y: auto;">
            <el-form ref="form1" :model="form" size="small" :inline="true" class="history-table" label-width="180px">
              <!-- 基础信息展示 -->
              <el-form-item label="申请编号">
                <el-input v-model="form.applicationCode" disabled />
              </el-form-item>
              <el-form-item label="申请状态">
                <el-input v-model="form.applicationStatus" disabled />
              </el-form-item>
              <el-form-item label="申请类型">
                <el-input v-model="form.applicationType" disabled />
              </el-form-item>
              <el-form-item label="申请人">
                <el-input v-model="form.applicationUser" disabled />
              </el-form-item>
              <el-form-item label="编目名称">
                <el-input v-model="form.catalogName" disabled />
              </el-form-item>
            </el-form>
          </el-col>

          <el-col v-if="currentOpenHandleDialog === 2" :span="24" style="max-height: 400px;overflow-y: auto;">
            <el-form ref="form2" :model="form" size="small" :inline="true" class="history-table" label-width="180px">
              <!-- 基础信息展示 -->
              <el-form-item label="申请人名称" style="width:50%">
                <el-input v-model="form.sqr" disabled />
              </el-form-item>
              <el-form-item label="申请人手机号" style="width:50%">
                <el-input v-model="form.phone" disabled />
              </el-form-item>
              <el-form-item label="申请人邮箱" style="width:50%">
                <el-input v-model="form.email" disabled />
              </el-form-item>
              <el-form-item label="需求描述" style="width:50%">
                <el-input v-model="form.descri" disabled />
              </el-form-item>
              <el-form-item label="使用起始时间" style="width:50%">
                <el-input v-model="form.startTime" disabled />
              </el-form-item>
              <el-form-item label="使用结束时间" style="width:50%">
                <el-input v-model="form.endTime" disabled />
              </el-form-item>

              <el-form-item label="应用场景" style="width:50%">
                <el-input v-model="form.appScene" disabled />
              </el-form-item>
              <el-form-item label="审批编号" style="width:50%">
                <el-input v-model="form.spbh" disabled />
              </el-form-item>
              <el-form-item label="审批状态" style="width:50%">
                <el-input v-model="form.spzt" disabled />
              </el-form-item>
              <el-form-item label="数据局审批人" style="width:50%">
                <el-input v-model="form.spr" disabled />
              </el-form-item>
              <el-form-item label="需求资源名称" style="width:50%">
                <el-input v-model="form.dataName" style="width:100%" disabled />
              </el-form-item>
              <el-form-item label="服务方式" style="width:50%">
                <el-input v-model="form.type" style="width:100%" disabled />
              </el-form-item>
              <el-form-item label="数据项" style="width:50%">
                <el-input v-model="form.dataItem" disabled />
              </el-form-item>
              <el-form-item label="资源覆盖范围" style="width:50%">
                <el-input v-model="form.resourceRange" disabled />
              </el-form-item>
              <el-form-item label="创建时间（申请时间）" style="width:50%">
                <el-input v-model="form.createTime" disabled />
              </el-form-item>
              <el-form-item label="文件" class="form-item">
                <span v-if="form.file && form.file.length > 0">
                  <span v-for="item in form.file" :key="item.id" class="file-item" @click="downLoad(item)">
                    {{ item.name }}
                  </span>
                </span>
                <span v-else> <el-tag type="danger">暂无附件</el-tag>

                </span>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col v-if="currentOpenHandleDialog === 3" :span="24" style="max-height: 400px;overflow-y: auto;">
            <el-form ref="form1" :model="form" size="small" :inline="true" class="history-table" label-width="180px">
              <!-- 基础信息展示 -->
              <el-form-item label="需求审批编号">
                <el-input v-model="form.demandSpbh" disabled />
              </el-form-item>
              <el-form-item label="需求资源名称">
                <el-input v-model="form.demandName" disabled />
              </el-form-item>
              <el-form-item label="督办人">
                <el-input v-model="form.dbr" disabled />
              </el-form-item>
              <el-form-item label="督办内容">
                <el-input v-model="form.dbnr" disabled />
              </el-form-item>
              <el-form-item label="被督办人">
                <el-input v-model="form.bdbr" disabled />
              </el-form-item>
              <el-form-item label="督办编号">
                <el-input v-model="form.dbbh" disabled />
              </el-form-item>
              <el-form-item label="回复内容">
                <el-input v-model="form.hfnr" disabled />
              </el-form-item>
              <el-form-item label="状态">
                <el-input v-model="form.status" disabled />
              </el-form-item>
            </el-form>
          </el-col>

          <el-col v-if="currentOpenHandleDialog === 4" :span="24" style="max-height: 400px;overflow-y: auto;">
            <el-form ref="form1" :model="form" size="small" :inline="true" class="history-table" label-width="180px">
              <!-- 基础信息展示 -->
              <el-form-item label="撤销理由">
                <el-input v-model="form.deleteReason" disabled />
              </el-form-item>
              <el-form-item label="数据责任名称">
                <el-input v-model="form.taskName" disabled />
              </el-form-item>
              <el-form-item label="数据责任类型">
                <el-input v-model="form.taskType" disabled />
              </el-form-item>
              <el-form-item label="数据责任描述">
                <el-input v-model="form.taskDescri" disabled />
              </el-form-item>
              <el-form-item label="数据责任状态">
                <el-input v-model="form.taskStatus" disabled />
              </el-form-item>
              <el-form-item label="审批人">
                <el-input v-model="form.spr" disabled />
              </el-form-item>
              <el-form-item label="审批编号">
                <el-input v-model="form.spbh" disabled />
              </el-form-item>
              <el-form-item label="审批时间">
                <el-input v-model="form.spsj" disabled />
              </el-form-item>
              <el-form-item label="数据责任撤销审批状态">
                <el-input v-model="form.spzt" disabled />
              </el-form-item>
              <el-form-item label="数据责任撤销审批意见">
                <el-input v-model="form.spyj" disabled />
              </el-form-item>
              <el-form-item label="文件" class="form-item">

                <span v-if="form.file && form.file.name" class="file-item" @click="downLoad(form.file)">
                  {{ form.file && form.file.name }}
                </span>
                <span v-else> <el-tag type="danger">暂无附件</el-tag>

                </span>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col v-if="currentOpenHandleDialog === 5" :span="24" style="max-height: 400px;overflow-y: auto;">
            <el-form ref="form1" :model="form" size="small" :inline="true" class="history-table" label-width="180px">
              <!-- 基础信息展示 -->
              <el-form-item label="申请编号">
                <el-input v-model="form.appNub" disabled />
              </el-form-item>
              <el-form-item label="申请单位">
                <el-input v-model="form.appDept" disabled />
              </el-form-item>
              <el-form-item label="申请人邮箱">
                <el-input v-model="form.appEmail" disabled />
              </el-form-item>
              <el-form-item label="申请人电话">
                <el-input v-model="form.appPhone" disabled />
              </el-form-item>
              <el-form-item label="申请人姓名">
                <el-input v-model="form.appName" disabled />
              </el-form-item>
              <el-form-item label="应用场景">
                <el-input v-model="form.appScenarios" disabled />
              </el-form-item>
              <el-form-item label="应用事项">
                <el-input v-model="form.appMatters" disabled />
              </el-form-item>
              <el-form-item label="申请依据">
                <el-input v-model="form.appBasis" disabled />
              </el-form-item>
              <el-form-item label="业务系统">
                <el-input v-model="form.appSystem" disabled />
              </el-form-item>

              <el-form-item label="业务系统iP">
                <el-input v-model="form.appId" disabled />
              </el-form-item>
              <el-form-item label="系统部署地址">
                <el-input v-model="form.appSystemLocation" disabled />
              </el-form-item>
              <el-form-item label="使用方式">
                <el-input v-model="form.appMethod" disabled />
              </el-form-item>
              <el-form-item label="api使用期限(天)">
                <el-input v-model="form.apiLife" disabled />
              </el-form-item>
              <el-form-item label="api调用频率(天)">
                <el-input v-model="form.apiCallFrequency" disabled />
              </el-form-item>
              <el-form-item label="api调用起始时间">
                <el-input v-model="form.apiTimeStart" disabled />
              </el-form-item>
              <el-form-item label="api调用结束时间">
                <el-input v-model="form.apiTimeEnd" disabled />
              </el-form-item>
              <el-form-item label="数据库地址(ip+端口)">
                <el-input v-model="form.databaseAddress" disabled />
              </el-form-item>
              <!--              <el-form-item label="申请人">-->
              <!--                <el-input v-model="form.appApplicant" disabled />-->
              <!--              </el-form-item>-->
              <el-form-item label="申请状态">
                <el-input v-model="form.appStu" disabled />
              </el-form-item>

              <el-form-item label="数据局审批意见">
                <el-input v-model="form.approvalResionDataBureau" disabled />
              </el-form-item>
              <el-form-item label="数据源审批意见">
                <el-input v-model="form.approvalResionDataSource" disabled />
              </el-form-item>
              <el-form-item label="数据局审批人">
                <el-input v-model="form.approvalDataBureau" disabled />
              </el-form-item>
              <el-form-item label="数据源审批人">
                <el-input v-model="form.approvalDataSource" disabled />
              </el-form-item>

              <el-form-item label="备注">
                <el-input v-model="form.remarks" disabled />
              </el-form-item>
              <!--              <el-form-item label="编目ID">-->
              <!--                <el-input v-model="form.catalogId" disabled />-->
              <!--              </el-form-item>-->
              <el-form-item label="编目名称">
                <el-input v-model="form.catalogName" disabled />
              </el-form-item>
              <!-- <el-form-item label="编目">
                <el-input v-model="form.catalogInfoVo" disabled />
              </el-form-item> -->

              <el-form-item label="创建人">
                <el-input v-model="form.createBy" disabled />
              </el-form-item>
              <el-form-item label="更新人">
                <el-input v-model="form.updateBy" disabled />
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input v-model="form.createTime" disabled />
              </el-form-item>
              <el-form-item label="更新时间">
                <el-input v-model="form.updateTime" disabled />
              </el-form-item>
              <el-form-item label="是否超期">
                <el-input v-model="form.isOverdue" disabled />
              </el-form-item>
              <el-form-item label="是否挂载资源">
                <el-input v-model="form.isMr" disabled />
              </el-form-item>
              <el-form-item label="附件">
                <!-- <el-input v-model="form.attachment" disabled /> -->
                <span v-if="form.dataFiles && form.dataFiles.length > 0">
                  <span v-for="item in form.dataFiles" :key="item.id" class="file-item" @click="downLoad(item)">
                    {{ item.name }}
                  </span>
                </span>
                <span v-else class="empty-tip">无附件</span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <ZybmInfoDialog ref="detailsDialog" />
    <!-- 数据需求申请对话框 -->
    <sjxqsqDialog ref="sjxqsqDialogRef" />
    <!-- 需求督办申请对话框-->
    <xqdbsqDialog ref="xqdbsqDialogRef" />
    <!--  责任撤销对话框  -->
    <sjzrDialog ref="sjzrDialogRef" />
  </div>
</template>

<script>
import Pagination from '@/components/common/Pagination.vue'
import { downloadFile } from '@/api/xwZx'

import ZybmInfoDialog from '@/views/TaskManagement/ApprovalRecords/ZybmInfoDialog.vue'
import {
  // getCatalogDetail,
  getHistory,
  getMyCompletedTasks,
  getInteractDetail,
  getSupervisionDetail,
  getDetailBySpbh,
  getsSharingAppDetail
} from '@/api/taskManagement/allTasksInfo'
import { getApplicationDetail } from '@/api/taskManagement/myApplicationInfo'
import sjzrDialog from '@/views/TaskManagement/ApprovalRecords/sjzrDialog.vue'
import xqdbsqDialog from '@/views/TaskManagement/ApprovalRecords/xqdbsqDialog.vue'
import sjxqsqDialog from '@/views/TaskManagement/ApprovalRecords/sjxqsqDialog.vue'

export default {
  name: 'SimpleApprovalList',
  components: { sjxqsqDialog, xqdbsqDialog, sjzrDialog, ZybmInfoDialog, Pagination },
  data() {
    return {
      timeValue: [],
      typeMap: { 0: '上线', 1: '下线' },
      statusMap: { 0: '待处理', 1: '审批通过', 2: '审批拒绝', 3: '已撤销' },
      sjsqMap: {
        0: '数据路',
        1: 'api接口',
        2: '文件'
      },
      spztMap: {
        0: '待数据局初审',
        1: '数据局初审通过，数据源部门审核中',
        2: '数据局初审通过且已形成数据编目',
        3: '数据局初审退回',
        4: '数据源部门审核通过，数据局二审',
        5: '数据源部门退回',
        6: '数据局二审退回至数据源部门',
        7: '数据局二审通过'
      },
      dbMap: {
        0: '待确定',
        1: '已确定'
      },
      sjzrlxMap: {
        0: '数据库',
        1: 'api接口',
        2: '文件'
      },
      sjzrztMap: {
        0: '待处理',
        1: '处理中',
        2: '己完成'
      },
      cxspztMap: {
        0: '待审核',
        1: '通过',
        2: '退回'
      },
      syfsMap: {
        0: 'api',
        1: '数据库',
        2: '文件'
      },
      sfcqMap: {
        0: '是',
        1: '否'
      },
      bmsqztMap: {
        0: '待审批',
        1: '数据局审批通过',
        2: '审批通过',
        3: '审批拒绝',
        4: '已撤销'
      },
      showDialog: false,
      processName: '',
      form: {
        id: ''
      },
      activities: [],
      // 表格数据
      approvalList: [],
      totalCount: 0,
      currentPage: 1,
      pageSize: 10,
      // 查询条件
      query: {
        businessKey: '',
        taskName: '',
        createTime: ''
      },
      taskName: '',
      currentOpenHandleDialog: 0
    }
  },
  created() {
    this.loadApprovalList()
  },
  methods: {
    // 处理查看编目详情点击事件
    handleViewDetails(row) {
      this.openHandleDialog(row)
      return
      // console.log(row.processName, 'row')
      // if (row.processName === '编目上线申请' || row.processName === '编目下线申请') {
      //   getCatalogDetail(row.businessKey).then(res => {
      //     console.log(res, '详情')
      //     this.$refs.detailsDialog.setDetailData(res)
      //   })
      // } else if (row.processName === '数据需求申请') {
      //   getInteractDetail(row.businessKey).then(res => {
      //     console.log(res, '数据需求申请')
      //     this.$refs.sjxqsqDialogRef.setDetailData(res)
      //   })
      // } else if (row.processName === '需求督办申请') {
      //   getSupervisionDetail(row.businessKey).then(res => {
      //     console.log(res, '需求督办申请')
      //     this.$refs.xqdbsqDialogRef.setDetailData(res)
      //   })
      // } else if (row.processName === '责任撤销申请') {
      //   getDetailBySpbh(row.businessKey).then(res => {
      //     console.log(res, '责任撤销申请')
      //     this.$refs.sjzrDialogRef.setDetailData(res)
      //   })
      // } else if (row.processName === '编目使用申请') {
      //   getsSharingAppDetail(row.businessKey).then(res => {
      //     console.log(res, '编目使用申请')
      //     this.$refs.bmsyDialogRef.setDetailData(res)
      //   })
      // }
    },
    // 重置表单
    resetForm(done) {
      this.form = {
        businessKey: '',
        starter: '',
        startTime: ''
      }
      done()
    },
    // 打开办理弹窗
    openHandleDialog(row) {
      this.processName = row.processName
      if (row.processName === '编目上线申请' || row.processName === '编目下线申请') {
        getApplicationDetail(row.businessKey).then(res => {
          // 转换状态文字
          this.currentOpenHandleDialog = 1

          const typeText = this.typeMap[res.applicationType] || '未知类型'
          const statusText = this.statusMap[res.applicationStatus] || '未知状态'
          this.form = {
            applicationCode: res.applicationCode,
            applicationStatus: statusText,
            applicationType: typeText,
            applicationUser: res.applicationUser,
            catalogName: res.catalogName,
            id: res.id
          }
          console.log(this.form.id, '编目上线申请,编目下线申请')

          this.showDialog = true
        })
      } else if (row.processName === '数据需求申请') {
        getInteractDetail(row.businessKey).then(res => {
          console.log(res, '数据需求申请')
          this.currentOpenHandleDialog = 2

          this.form = {
            dataName: res.dataName,
            type: this.sjsqMap[res.type],
            dataItem: res.dataItem,
            resourceRange: res.resourceRange,
            sqr: res.sqr,
            phone: res.phone,
            email: res.email,
            descri: res.descri,
            startTime: res.startTime,
            endTime: res.endTime,
            appScene: res.appScene,
            spbh: res.spbh,
            spzt: this.spztMap[res.spzt],
            spr: res.spr,
            createTime: res.createTime,
            file: res.dataFile

          }
        })
      } else if (row.processName === '需求督办申请') {
        getSupervisionDetail(row.businessKey).then(res => {
          console.log(res, '需求督办申请')
          this.currentOpenHandleDialog = 3
          this.form = {
            demandSpbh: res.demandSpbh,
            demandName: res.demandName,
            dbr: res.dbr,
            dbnr: res.dbnr,
            bdbr: res.bdbr,
            hfnr: res.hfnr,
            dbbh: res.dbbh,
            status: this.dbMap[res.status]

          }
        })
      } else if (row.processName === '责任撤销申请') {
        getDetailBySpbh(row.businessKey).then(res => {
          console.log(res, '责任撤销申请')
          this.currentOpenHandleDialog = 4
          this.form = {
            deleteReason: res.deleteReason,
            taskName: res.taskName,
            taskType: this.sjzrlxMap[res.taskType],
            taskDescri: res.taskDescri,
            taskStatus: this.sjzrztMap[res.taskStatus],
            spr: res.spr,
            spbh: res.spbh,
            spsj: res.spsj,
            spzt: res.spzt,
            spyj: res.spyj,
            file: res.file
          }
        })
      } else if (row.processName === '编目使用申请') {
        getsSharingAppDetail(row.businessKey).then(res => {
          console.log(res, '编目使用申请')
          this.currentOpenHandleDialog = 5
          this.form = {
            appNub: res.appNub,
            appDept: res.appDept,
            appEmail: res.appEmail,
            appPhone: res.appPhone,
            appName: res.appName,
            appScenarios: res.appScenarios,
            appMatters: res.appMatters,
            appBasis: res.appBasis,
            appSystem: res.appSystem,

            appId: res.appId,
            appSystemLocation: res.appSystemLocation,
            appMethod: this.syfsMap[res.appMethod],
            apiLife: res.apiLife,
            apiCallFrequency: res.apiCallFrequency,
            apiTimeStart: res.apiTimeStart,
            apiTimeEnd: res.apiTimeEnd,
            databaseAddress: res.databaseAddress,
            appApplicant: res.appApplicant,
            appStu: this.bmsqztMap[res.appStu],

            approvalResionDataBureau: res.approvalResionDataBureau,
            approvalResionDataSource: res.approvalResionDataSource,
            approvalDataBureau: res.approvalDataBureau,
            approvalDataSource: res.approvalDataSource,
            attachment: res.attachment,
            remarks: res.remarks,
            catalogId: res.catalogId,
            catalogName: res.catalogName,
            catalogInfoVo: res.catalogInfoVo,

            createBy: res.createBy,
            updateBy: res.updateBy,
            createTime: res.createTime,
            updateTime: res.updateTime,
            isOverdue: this.sfcqMap[res.isOverdue],
            isMr: res.isMr === 0 ? '是' : '否',
            dataFiles: res.dataFiles

          }
        })
      }

      getHistory(
        row.processInstanceId,
        {
          page: 0,
          size: 999
        }).then(response => {
        console.log(response, 'response123')
        this.activities = response.content
      }).catch(error => {
        console.error('获取审批记录失败:', error)
      })

      // // 模拟审批历史
      // this.activities = [
      //   {
      //     time: row.startTime + ' 09:30',
      //     user: row.starter,
      //     task: '发起申请',
      //     comment: '请尽快审批'
      //   }
      // ]

      this.showDialog = true
    },
    // 加载审批列表
    loadApprovalList() {
      getMyCompletedTasks({
        page: this.currentPage,
        size: this.pageSize,
        businessKey: this.query.businessKey,
        startTime: this.timeValue ? this.timeValue[0] : null,
        endTime: this.timeValue ? this.timeValue[1] : null,
        taskName: this.query.taskName
      }).then(res => {
        console.log(res, '000')
        this.approvalList = res.content
        this.totalCount = res.totalElements
      })
    },

    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.loadApprovalList()
    },

    // 重置搜索
    resetSearch() {
      this.query = {
        businessKey: '',
        processName: '',
        startTime: []
      }
      this.timeValue = null
      this.handleSearch()
    },

    // 切换分页
    changePage(page) {
      this.currentPage = page
      this.loadApprovalList()
    },
    handlePageSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.loadApprovalList()
    },
    downLoad(item) {
      console.log(item)
      downloadFile(item.id).then(res => {
        // 3. 将 blob 转换为可下载的链接
        const blob = new Blob([res], {
          // 根据文件类型设置 MIME 类型
          // 常见类型：application/pdf、image/jpeg、application/vnd.ms-excel 等
          type: 'application/octet-stream'
        })

        // 4. 创建 a 标签并触发下载
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = item.name
        document.body.appendChild(a)
        a.click() // 触发点击下载

        // 5. 清理资源
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url) // 释放 blob URL

        this.$message.success('文件下载成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//// 弹窗整体样式
.approval-dialog {
  ::v-deep .el-dialog__body {
    //padding: 15px 20px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
.app-container {
  padding: 20px;
}

.filter-item {
  margin-right: 10px;
}

.date-item {
  margin-right: 10px;
  width: 240px;
}

.role-span {
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.history-box {
  overflow-y: auto;
  padding: 10px 15px;
  background-color: #f8fafc;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid #e2e8f0;

  h3 {
    padding: 10px;
    color: #334155;
  }
}

.history-table {
  margin-bottom: 18px;
  //padding: 12px 15px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-form-item {
    margin-right: 0 !important;
  }

  ::v-deep .el-form-item__content {
    width: 275px;
  }
}

::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep .el-card__body {
  padding: 0 10px;
}

::v-deep .el-timeline-item__timestamp {
  font-size: 12px;
}

.file-item {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 6px;
  border: 5px;
  cursor: pointer;
}
</style>
